<template>
  <div class="page-min">
        <div class="sreach-view">
                <el-form ref="form"   label-width="90px">
					<el-form-item label="项目名称:" style="width:250px">
					     <el-input size="mini" clearable v-model="form.data.projectName" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="报告号:" style="width:250px">
					     <el-input size="mini" clearable v-model="form.data.reportNo" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="项目规模:" style="width:250px">
					     <el-input size="mini" clearable v-model="form.data.projectScale" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="项目类别:" style="width:250px">
					     <el-input size="mini" clearable v-model="form.data.projectCategory" placeholder="请输入内容"></el-input>
					</el-form-item>
                    <el-form-item label="合同签订情" style="width:280px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.contractStatus" 
                            placeholder="">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="项目接收期" style="width:250px">
                              <el-date-picker
                                v-model="form.receiveDate"
                                type="date"
                                placeholder="选择日期">
                              </el-date-picker>
                    </el-form-item>
                     <el-form-item label="" prop="name" style="width:300px">
                        <el-button type="primary" size="mini"  icon="el-icon-search"  @click="btnQuery">查询</el-button>
                        <el-button size="mini"  icon="el-icon-scissors"  @click="resetData">重置</el-button>
                   <!--     <label @click="btnDevelop" class="btn-open">展开 
                          <i :class="{'el-icon-arrow-down':!openStatus,'el-icon-arrow-up':openStatus}"  /></label> -->
                    </el-form-item>
                </el-form>
               
          </div>
            <div class="tools-view">
              <el-button type="primary" size="mini"   icon="el-icon-plus" @click="btnOpen('新增')">新增</el-button>
			  <el-button type="primary" size="mini"   icon="" @click="btnOpen('导出')">导出</el-button>
			  <el-button type="primary" size="mini"   icon="" @click="btnOpen('打印')">打印</el-button>
			  <el-button type="primary" size="mini"   icon="" @click="btnOpen('跟新进展')">跟进进展</el-button>
			  <el-button type="primary" size="mini"   icon="" @click="btnOpen('更新进度')">更新进度</el-button>
              <i class="el-icon-refresh-right" title="刷新" />
              <i class="el-icon-upload" title="下载" />
               <el-popover placement="right" width="0" trigger="click">
                <el-checkbox-group v-model="colOptions">
                    <el-checkbox v-for="(item,index) in columnList" :label="item.label" :key="index" ></el-checkbox>
                </el-checkbox-group>
                <i slot="reference" class="el-icon-s-grid" title="设置列" />
            </el-popover>
            </div>
            <el-table
                :data="tableData"
                ref="tableDataRef"
                border
                height="100%"
                :header-cell-style="{background:'#F0F1F6',color:'#333'}"
                style="width: 100%;min-height: 600px;">
                <el-table-column
                    prop="date"
                     align="center"
                    fixed
                    width="60"
                    label="序号">
                     <template slot-scope="scope">
                         {{scope.$index+1}}
                     </template>
                </el-table-column>
                <template  v-for="(item,index) in columnList" >
                      <el-table-column    
                          :key="index"   
                          :prop="item.prop"  
                          align="center"
                          :label="item.label"
                          min-width="120"
                          v-if="item.iStrue"
                        />
                </template>
                   <el-table-column v-if="tableType==0"
                   align="center"
                    width="200"
                    prop="name"
                    fixed="right"
                    label="操作"
                    >
                    <template slot-scope="scope">
                        <el-button  @click="getDetails(scope.row)"   type="text" size="mini">详情</el-button>
                         <!-- <el-button  @click="btnDeales(scope.row)"   type="text" size="mini">提交</el-button> -->
                           <el-button size="mini" type="text"   @click="btnDel(scope.row)">删除</el-button>
						   <el-button  @click="consultClick(scope.row)"   type="text" size="mini">查阅</el-button>
                    </template>
                </el-table-column>
                   
            </el-table>
               <el-pagination style="margin:20px auto;width:98%"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.currentPage"
                :total="total">
                </el-pagination>
            <el-dialog  :visible.sync="dialogVisible" :close-on-click-modal="false"	 width="1100px"  :title="title">
				<template v-if="title=='新增'">
					<addData @changData='changData' />
				</template>
				<template v-if="title=='跟新进展'">
					<updataProgress />
				</template>
				<template v-if="title=='详情'">
					<pDetail />
				</template>
            </el-dialog>
  </div>
</template>

<script>
<<<<<<< HEAD
// import  {getData,getDataDetails,getReceipts,saveReceipts,delReceipts,allListProject,enterpriseList,getUserList}  from '@/api/user'
import  {deleteProject,getData,getProjectDetails,getConsult}  from '@/api/project';
import pDetail from './components/pDetail.vue'
import addData from './components/add.vue'
import updataProgress from './components/updata.vue'

export default {
  components:{
    pDetail,
	addData,
	updataProgress
  },
  data() {
    return {
		options: [{
				value: '已签',
				label: '已签'
			  }, {
				value: '未签',
				label: '未签'
			  }],
=======

  import  {getData,getDataDetails,getReceipts,saveReceipts,delReceipts,allListProject,enterpriseList,getUserList}  from '@/api/user'
  // import  {getData}  from '@/src/api/projectManage'
  import pDetail from './components/pDetail.vue'
  import editData from './components/edit.vue'
  export default {
    components:{
      pDetail,
      editData
    },
    data() {
      return {
>>>>>>> 6f1b8acb3b394f3601ce97078760eba916e67c40
        tableData: [

        ],
        tableType:'0',
        dialogVisible:false,
        openStatus:false,
        form: {
          data:{
            "projectName": '',
            "reportNo": '',
            "projectScale": '',
            "projectCategory": '',
            "receiveDate":'',
            "contractStatus": ''
          },
          page:1,
          pageSize:10,
          total:0
        },
        saveForm:{
          id:'',
          projectId:'',
          enterpriseId:'',
          rcAmount:'',
          rcTime:'',
          rcPeople:'',
          rcNumber:'',
          rcStatus:''
        },
        rules: {
          projectId: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
          enterpriseId: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
          rcAmount: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
        },
        title:'',
        total:0,
        projectList:[],
        entList:[],
        userList:[],
        colData:[],
        columnList:[],
        dataList:[
          {label:'报告号',prop:'reportNo',iStrue:false,tableType:'0'},
          {label:'项目名称',prop:'projectName',iStrue:true,tableType:'0'},
          {label:'项目规模',prop:'projectScale',iStrue:true,tableType:'0'},
          {label:'项目类别',prop:'name',iStrue:true,tableType:'0'},
          {label:'联系人',prop:'projectCategory',iStrue:true,tableType:'0'},
          {label:'项目产值',prop:'outputVal',iStrue:true,tableType:'0'},
        ],
        colOptions: [],
      }
    },
    watch: {
<<<<<<< HEAD
     colOptions(valArr) {
       this.columnList.map((item)=>{
        if(valArr.includes(item.label)){
          item.iStrue=true
        }else{
          item.iStrue =false
        }
        return item
       })
     },
     tableType(){
       this.setTable(this.tableType)
     }
   },
  created(){
   this.setTable('0')
  },
  mounted() {
  	this.getPageList()
  },
  methods: {
	  changData(data){
		  this.dialogVisible = false
		  this.getPageList()
	  },
    setTable(type){
     this.columnList= this.dataList.filter((list)=>{
        return list.tableType==type
      })
      this.columnList.map((item)=>{
          this.colOptions.push(item.label)
      })
=======
      colOptions(valArr) {
        this.columnList.map((item)=>{
          if(valArr.includes(item.label)){
            item.iStrue=true
          }else{
            item.iStrue =false
          }
          return item
        })
      },
      tableType(){
        this.setTable(this.tableType)
      }
>>>>>>> 6f1b8acb3b394f3601ce97078760eba916e67c40
    },
    created(){
      this.setTable('0')
    },
    mounted() {
      this.getPageList()
    },
    methods: {
      setTable(type){
        this.columnList= this.dataList.filter((list)=>{
          return list.tableType==type
        })
        this.columnList.map((item)=>{
          this.colOptions.push(item.label)
        })
      },
      btnQuery(){
        this.getPageList()
      },
      resetData(){
        this.getPageList()
      },
      btnDevelop(){
        this.openStatus =!this.openStatus
      },
      getPageList(){
        getData(this.form).then((res)=>{
          if(res.code==200){
            console.log(res)
            this.tableData = res.rows
            this.tableData.map((item)=>{
              item.outputVal = (item.progress/100)*item.contractAmount
              return item
            })
            this.total = res.total
          }else{
            this.tableData = []
          }
        })
      },
      btnSave(){
        this.$refs['formName'].validate((valid) => {
          if (valid) {
            saveReceipts(this.saveForm).then((res)=>{
              if(res.code=200){
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.dialogVisible = false
                this.getPageList()
              }else{
                this.$message({
                  message: '保存失败',
                  type: 'error'
                });
              }
<<<<<<< HEAD
          })
     },
     btnSave(){
	   this.$refs['formName'].validate((valid) => {
			if (valid) {
				saveReceipts(this.saveForm).then((res)=>{
				  if(res.code=200){
					this.$message({
					  message: '保存成功',
					  type: 'success'
					});
					this.dialogVisible = false
					 this.getPageList()
				  }else{
					this.$message({
					  message: '保存失败',
					  type: 'error'
					});
				  }
				})
			} else {
				return false;
			}
		});
     },
     handleSizeChange(val) {
=======
            })
          } else {
            return false;
          }
        });
      },
      handleSizeChange(val) {
>>>>>>> 6f1b8acb3b394f3601ce97078760eba916e67c40
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(val,'currentPage')
        this.form.currentPage = val
        this.getPageList()
      },
      btnOpen(text){
        this.saveForm={
          id:'',
          projectId:'',
          enterpriseId:'',
          rcAmount:'',
          rcTime:'',
          rcPeople:'',
          rcNumber:'',
          rcStatus:''
        }
        this.title= text
        this.dialogVisible = true
      },
	  getDetails(item){
			getProjectDetails(item.id).then((res)=>{
				console.log(res)	
			})
	  },
	  consultClick(item){
		  getConsult(item.id).then((res)=>{
		  	console.log(res)	
		  })
	  },
	
      btnDeales(item){
        this.title='详情'
        this.saveForm={
          id:item.id,
          projectId:item.projectId,
          enterpriseId:item.enterpriseId,
          rcAmount:item.rcAmount,
          rcTime:item.rcTime,
          rcPeople:item.rcPeople,
          rcNumber:item.rcNumber,
          rcStatus:item.rcStatus
        }
        this.dialogVisible = true
      },
	  deleProgect(){
		  
	  },
      btnDel(item){
		  console.log(item)
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
<<<<<<< HEAD
			deleteProject(item.id).then((res)=>{
			     if(res.code==200){
			       this.$message({
			          type: 'success',
			          message: '删除成功!'
			        });
			         this.getPageList()
			    }else{
			        this.$message({
						message: '删除失败',
						type: 'error'
					});
			    }
			})
           
=======
          delReceipts(item.id).then((res)=>{
            if(res.code==200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getPageList()
            }else{
              this.$message({
                message: '删除失败',
                type: 'error'
              });
            }
          })
>>>>>>> 6f1b8acb3b394f3601ce97078760eba916e67c40
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
    }
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
.sreach-view{
    border-bottom:1px solid #EAEDF0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    flex-flow: wrap;
     .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        .el-form-item{
          margin-bottom:6px;
        }
        }
        .el-form-item__label{
            color: #666;
            font-weight: normal;
        }
        .btn-open{
          cursor: pointer;
          margin-left:20px;
          font-size:14px;
          color:#1890ff;
          i{
            font-size:14px;
            color:#1890ff;
          }
        }
}
.tools-view{
  text-align: right;
  padding:10px 0;
  position: relative;
  .title{
    position:absolute;
    left:0;
    font-size:16px;
    color:#606266;
    font-weight: normal;
    height:30px;
    line-height:30px;
  }
  i{
    font-size:16px;
    cursor: pointer;
    color: #606266;
    margin-left:10px;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align: center;
    line-height:30px;
    border:1px solid #dcdfe6;
  }:hover{
    color:#1890ff;
  }
}

.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}

</style>